<template>
  <div class="upload-container">
    <div class="click-container" @click="onClickPannel">
        <img src="@/assets/upload.png" ref="showImg">
        <input type="file" id="inputImage" @change="selectImages">
    </div>
    <div class="showWaitImage" >
        <div class="uploadItem">
            <h3>待上传的图片:</h3>
            <h5>{{ fileName }}</h5>
        </div>
        <button @click="upload">上传</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            file:{},
            fileSrc:'',
            fileName:''
        }
    },
    methods:{
        onClickPannel(){
            let input = document.querySelector('#inputImage')
            input.click()
        },
        selectImages(e){
            this.file = e.target.files['0']
            this.fileSrc = URL.createObjectURL(this.file)
            this.$refs.showImg.src = this.fileSrc
            this.fileName = this.file.name
        },
        async upload(){
            if(this.fileName!=''){
                let formdata = new FormData()  
                formdata.append('image',this.file,this.file.name)
                console.log(this.file.name)
                let {data:res} = await this.$http.post('/uploadImage',formdata)
                if(res==='ok'){
                alert('上传成功')
            }
            }
        }
    }
}
</script>

<style lang="less">
    .upload-container{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: rgb(193, 218, 218);
        .click-container{
            display: flex;
            width: 80%;
            height: 50%;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            background-color: rgb(123, 155, 145);
            border-radius: 30px;
            cursor: pointer;
            border: 1px;
            input{
                display: none;
            }
            img{
                width: 200px;
            }
        }
        .showWaitImage{
            width: 80%;
            height: 160px;
            margin-top: 50px;
            background-color: aliceblue;
            border-radius: 20px;
            box-sizing: border-box;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            button{
                width: 16%;
                height: 30%;
                border: 0px solid #ffffff;
                background-color: #000000;
                color: #ffffff;
                border-radius: 20px;
                font-weight: bold;
                letter-spacing: 5px;
                text-align: center;
                cursor: pointer;
            }
            button:hover{
                background-color: #1c1b1b;
                color: #ffffff;
            }
        }
    }
</style>